<template>
  <a-modal
    :visible="visible"
    title="短信验证"
    @cancel="cancelVerify"
    @ok="verifyCode"
    :width="400"
    @destroyOnClose="true"
  >
    <div class="title">
      <a-form>
        <a-form-item label="手机号码">
          <div style="color: black">
            <span>{{ phoneNum }}</span>
            <span>（{{ name }}）</span>
          </div>
        </a-form-item>
        <a-form-item label="验证码" v-bind="validateInfos.remark">
          <a-input
            placeHolder="请输入验证码"
            type="number"
            v-model:value="modelRef.remark"
          >
            <template #addonAfter>
              <div v-if="timeCount > 0">
                <span class="mr-3">{{ timeCount }}</span> 秒后重新获取
              </div>
              <div v-else>
                <a-button size="small" type="link" @click="getCode"
                  >获取验证码</a-button
                >
              </div>
            </template>
          </a-input>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script>
import { watch, reactive, toRefs, ref } from "vue";
import request from "../../../../common/utils/request";
import { message } from "ant-design-vue";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;
export default {
  props: {
    visible: { type: Boolean, default: false },
    group_key: {
      type: String,
      default: "",
    },
  },
  components: {},
  setup(props, context) {
    const TIMER_COUNT = 60;
    const state = reactive({
      phoneNum: "",
      name: "",
      timeCount: 0,
    });
    const modelRef = reactive({
      remark: "",
    });
    const rules = reactive({
      remark: [
        {
          required: true,
          message: "请输入验证码",
        },
      ],
    });

    const cancelVerify = () => {
      context.emit("closeModal");
    };

    const verifyCode = () => {
      validate()
        .then(() => {
          request
            .get("/org", "/eInvoice/szepiao/loginCheckSms", {
              group_key: props.group_key,
              account: state.phoneNum,
              remark: modelRef.remark,
            })
            .then((res) => {
              console.log(res);
              context.emit("closeModal");
            });
        })
        .catch((err) => {
          console.log(err);
        });
    };

    let codeTimer = null;
    const clearTimer = () => {
      if (codeTimer) {
        clearInterval(codeTimer);
        codeTimer = null;
      }
    };

    const getCode = () => {
      request
        .get("/org", "/eInvoice/szepiao/loginSendSms", {
          group_key: props.group_key,
          account: state.phoneNum,
        })
        .then((res) => {
          console.log(res);
          //   message.success("短信下发成功");
          codeTimer && clearTimer();
          state.timeCount = TIMER_COUNT;
          codeTimer = setInterval(() => {
            if (state.timeCount == 0) {
              clearTimer();
            }
            state.timeCount--;
          }, 1000);
        });
    };

    const getUserInfo = () => {
      request
        .get("/org", "/eInvoice/szepiao/taxEtaxUser", {
          group_key: props.group_key,
        })
        .then((res) => {
          console.log(res.info);
          state.phoneNum = res.info.phoneNum;
          state.name = res.info.name;
          getCode();
        });
    };

    const init = () => {
      getUserInfo();
    };

    watch(
      () => props.visible,

      (val) => {
        if (val == true) {
          init();
        } else {
          resetFields();
        }
      }
    );

    const { validate, resetFields, validateInfos } = useForm(modelRef, rules);

    return {
      ...toRefs(state),
      cancelVerify,
      verifyCode,
      getCode,
      modelRef,
      validateInfos,
    };
  },
};
</script>

<style lang="less" scoped>
.qr-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  .title {
    height: 100px;
    line-height: 100px;
    color: red;
    font-size: 18px;
  }

  .show-info {
    text-align: center;

    span {
      display: inline-block;
    }
  }

  .content {
    width: 100%;
    display: flex;
    justify-content: center;
    //   height: 500px;
  }
}
</style>
